<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="85px">

        <el-form-item label="MCU类型" >
          <el-select v-model="queryParams.mcuModel" clearable @change="handleQuery"  placeholder="请选择MCU类型">
            <el-option
              v-for="item in mcuSysTypeListData"
              :key="item.id"
              :label="item.model"
              :value="item.model">
              <span style="float: left">{{ item.model }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">（{{ item.name }}）</span>
            </el-option>
          </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>

        <el-button type="primary" plain icon="el-icon-circle-plus-outline"  @click="handleAdd"
                   v-hasPermi="['hardware:sensor-tenant-type:create']">保存租户的传感器授权</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
       <span style="color: red;">*请在上面MCU选项中选择相对应的MCU来进行传感器授权</span>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading"  :data="sensorSysTypeListData" ref="multipleTable"  @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="关联MCU" align="center" prop="mcuModel"/>
      <el-table-column label="名称" align="center" prop="name"/>
      <el-table-column label="型号" align="center" prop="model"/>
      <el-table-column label="厂商" align="center" prop="vendor"/>
      <el-table-column label="版本" align="center" prop="edition"/>
      <el-table-column label="说明" align="center" prop="specification"/>
    </el-table>
  </div>
</template>

<script>
import { getSensorTenantTypeList,createBatchSensorTenantType } from "@/api/hardware/sensorTenantType";
import { getSensorSysTypeList} from "@/api/hardware/sensorSysType";
import {getMcuSysTypeList} from "@/api/hardware/mcuSysType";

export default {
  name: "SensorTenantType",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // MCU租户分类列表
      list: [],
      dateRangeCreateTime: [],
      // 查询参数
      tenantData: {},
      queryParams: {
        tenantId: -1,
        mcuModel: "--",
        model: null,
        name: null,
        specification: null,
        type: null,
        vendor: null,
        edition: null,
      },
      sensorSysTypeListData: [],
      multipleSelection: [],
      mcuSysTypeListData: [],
    };
  },
  created() {
    this.tenantData=this.$route.params.tenantData
    this.queryParams.tenantId=this.tenantData.id
    this.getList();
    this.queryMcuSysTypeList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      // 执行查询
      getSensorTenantTypeList(this.queryParams).then(response => {
        this.list = response.data;

        /** 查询系统传感器列表　*/
        this.loading = true;
        getSensorSysTypeList(this.queryParams).then(response => {
          this.sensorSysTypeListData = response.data;
          /** 处理选中 */
          if (this.list.length>0) {
            this.$nextTick(() => {
              this.list.forEach(it => {
                let item = this.sensorSysTypeListData.find(item => {
                  return (item.model === it.model)&&(item.mcuModel === it.mcuModel);
                });
                this.$refs.multipleTable.toggleRowSelection(item,true);
              });
            });
          }
          this.loading = false;
        });

      });
    },
  queryMcuSysTypeList() {
    getMcuSysTypeList({}).then(response => {
      this.mcuSysTypeListData = response.data;
    });
  },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreateTime = [];
      this.queryParams.mcuModel = "--";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      if (this.multipleSelection.length<1){
        this.$modal.alertError("授权设备不到为空");
        return;
      }

      this.multipleSelection.forEach(it => {
        it.tenantId= this.tenantData.id
      });

      createBatchSensorTenantType(this.multipleSelection).then(response => {
        this.$modal.msgSuccess("租户设备授权成功");
        this.getList();
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>
